<!DOCTYPE html>
<html class="loading" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <title>登录</title>
    <link rel="apple-touch-icon" href="{{asset(config('view.backend.chameleon').'/app-assets/images/ico/apple-icon-120.png')}}">
    <link rel="shortcut icon" type="image/x-icon" href="{{asset(config('view.backend.chameleon').'/app-assets/images/ico/favicon.ico')}}">
    <!-- BEGIN VENDOR CSS-->
    <link rel="stylesheet" type="text/css" href="{{asset(config('view.backend.chameleon').'/app-assets/css/vendors.css')}}">
    <!-- END VENDOR CSS-->
    <!-- BEGIN CHAMELEON  CSS-->
    <link rel="stylesheet" type="text/css" href="{{asset(config('view.backend.chameleon').'/app-assets/css/app.css')}}">
    <!-- END CHAMELEON  CSS-->
    <!-- BEGIN Page Level CSS-->
    <link rel="stylesheet" type="text/css" href="{{asset(config('view.backend.chameleon').'/app-assets/css/palette-gradient.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset(config('view.backend.chameleon').'/app-assets/css/form-validation.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset(config('view.backend.chameleon').'/assets/css/style.css')}}">
    <!-- END Page Level CSS-->
    <!-- BEGIN Custom CSS-->
    <script>
        document.onreadystatechange = function () {
            if(document.readyState == 'complete'){
                document.getElementById('loading').style.display = 'none';
                /*setTimeout(function () {
                    document.getElementById('loading').style.display = 'none';
                },5000)*/
            }
        }
    </script>
   {{-- <script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>--}}
    <script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
</head>
<body class="vertical-layout vertical-menu-modern 1-column  bg-full-screen-image menu-expanded blank-page blank-page">
<div class="loading" id="loading"><div class="loadbox"> <img src="{{asset(config('view.backend.chameleon')).'/app-assets/images/loading.gif'}}"></div></div>
<div class="app-content content" id="app"
     @if(is_object($errors)&&$errors->all())
     data-error="{{$errors->first()}}"
     @elseif(is_string($errors))
        data-error="{{$errors}}"
     @endif
>
    <div class="content-wrapper">
        <div class="content-wrapper-before"></div>
        <div class="content-body">
            <section class="flexbox-container">
                <div class="col-12 d-flex align-items-center justify-content-center">
                    <div class="col-lg-5 col-md-6 col-10 box-shadow-2 p-0" style="max-width: 520px;">
                        <div class="card border-grey border-lighten-3 px-1 py-1 m-0">
                            <div class="card-header border-0">
                                <div class="text-center mb-1">
                                    <img src="{{asset(config('view.backend.chameleon').'/app-assets/images/logo/logo.png')}}" alt="branding logo">
                                </div>
                            </div>
                            <div class="card-content">

                                <div class="card-body">
                                    <form class="needs-validation" id="loginForm" novalidate>
                                        <fieldset class="form-group position-relative has-icon-left">
                                            <input type="text" class="form-control round" placeholder="账号"
                                                   v-bind:class="{'is-invalid':isInvalidUsername}"
                                                   v-model="username"
                                            >
                                            <div class="invalid-feedback" v-if="userError">@{{userError}}</div>
                                            <div class="form-control-position">
                                                <i class="ft-user"></i>
                                            </div>
                                        </fieldset>
                                        <fieldset class="form-group position-relative has-icon-left">
                                            <input type="password" class="form-control round"  placeholder="密码"
                                                   v-bind:class="{'is-invalid':isInvalidPass}"
                                                   v-model="pass"
                                            >
                                            <div class="invalid-feedback" v-if="passError">@{{ passError }}</div>
                                            <div class="form-control-position">
                                                <i class="ft-lock"></i>
                                            </div>
                                        </fieldset>
                                        <fieldset class="form-group position-relative has-icon-left">
                                            <input type="text"  class="form-control round"  placeholder="验证码"
                                                   v-bind:class="{'is-invalid':isInvalidCaptcha}"
                                                   v-model="captcha"
                                            >
                                            <div class="invalid-feedback" v-if="captchaError">@{{ captchaError }}</div>
                                            <div class="form-control-position">
                                                <i class="ft-shield"></i>
                                            </div>
                                        </fieldset>
                                        <fieldset class="form-group position-relative has-icon-left">
                                            <img id="refresh"
                                                 style="cursor: pointer;width: 100%;height:49px;border: solid #d9d9d9 1px;border-radius: 1.5rem;"
                                                 v-bind:src="captchaImg" alt="captcha" title="点击刷新验证码"
                                                 @click="refreshCaptcha">
                                        </fieldset>
                                        <div class="form-group row">
                                            <div class="col-md-6 col-12 text-center text-sm-left"></div>
                                            <div class="col-md-6 col-12 float-sm-left text-center text-sm-right">
                                                <a href="javascript:layer.alert('处于安全考虑,不提供找回密码功能,如有需要,请联系开发人员处理！');" class="card-link">忘记密码?</a>
                                            </div>
                                        </div>
                                        <div class="form-group text-center">
                                            <button type="button" @click = "submitForm" class="btn round btn-block btn-glow btn-bg-gradient-x-purple-blue col-12 mr-1 mb-1">登录</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </div>
    </div>
</div>
<script src="{{asset(config('view.plugin').'/layui/layui.all.js')}}"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script>
    layui.use(['jquery','layer'], function(){
        var $ = layui.jquery;
        var layer = layui.layer;
        if ($("#app").is("[data-error]")){
            var msg = $('#app').data('error');
            layer.msg(msg.toString().trim(),{icon:5,shade:0.5});
        }
    });

</script>
<script>
    new Vue({
        data:{
            username:'',
            isInvalidUsername:false,
            userError:false,
            pass:'',
            isInvalidPass:false,
            passError:false,
            captcha:'',
            isInvalidCaptcha:false,
            captchaError:false,
            captchaImg:"{{captcha_src()}}",
            appError:false,
        },
        watch:{
            captcha:function () {
                this.captchaError = this.isInvalidCaptcha = false;
            },
            pass:function () {
                this.passError = this.isInvalidPass = false;
            },
            username:function () {
                this.userError = this.isInvalidUsername = false;
            }
            
        },
        computed:{
            allInputData:{
                get:function () {
                    return {
                        'username':this.username,
                        'pass':this.pass,
                        'captcha':this.captcha
                    }
                }
            }
        },
        methods:{
            refreshCaptcha:function(){
               this.captchaImg = '{{captcha_src()}}?t='+Math.random();
            },
            tooltips:function (msg,icon) {
                layer.msg(msg,{icon: icon,shade:0.5});
            },
            submitForm:function () {
                var app = this;
                var load = layer.load(2);
                app.isInvalidUsername = app.isInvalidPass =app.isInvalidCaptcha = false;
                axios.post("{{route('b_Login_login')}}",this.allInputData,{
                        headers: {'X-Requested-With': 'XMLHttpRequest'}
                    }).then(function (response) {
                       var response = response.data;
                        if(response.status){
                            app.tooltips(response.msg,6);
                            setTimeout(function () {
                                location.href = response.url;
                            }, 2000);
                        }else{
                            app.tooltips(response.msg,5);
                        }
                    }).catch(function (error) {
                        if(response = error.response){
                            var response = error.response;
                            switch (response.status) {
                                case 422:
                                    var errors = response.data.errors;
                                    if(typeof errors == 'object') {
                                        for (var index in errors) {
                                           if (index == 'username') {
                                               app.isInvalidUsername = true;
                                               app.userError = errors[index][0];
                                           }
                                           if(index == 'pass'){
                                               app.isInvalidPass = true;
                                               app.passError = errors[index][0];
                                           }
                                            if(index == 'captcha'){
                                                app.isInvalidCaptcha = true;
                                                app.captchaError = errors[index][0];
                                            }
                                        }
                                    }else{
                                        layer.msg(response.data.msg,{icon: 5});
                                    }
                                    break;
                                case 500:
                                    layer.msg('服务器内部错误',{icon: 5});
                                    break;
                                default:
                                    layer.msg('网络错误,请稍后再试!',{icon: 5});
                            }
                        }else{
                            app.tooltips('服务器内部错误,请稍后再试!',5);
                        }
                    }).finally(function () {
                        app.refreshCaptcha();
                        layer.close(load);
                    });
            }
        }
    }).$mount('#app');
</script>
</body>
</html>
